{% extends "base.html" %}

{% block title %}登录 - VXBattle{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-6 col-lg-4">
        <div class="game-container p-4">
            <div class="text-center mb-4">
                <i class="fas fa-sign-in-alt fa-3x text-primary mb-3"></i>
                <h2 class="text-primary">用户登录</h2>
                <p class="text-muted">登录您的VXBattle账号</p>
            </div>

            <form id="loginForm">
                <div class="mb-3">
                    <label for="username" class="form-label">
                        <i class="fas fa-user me-1"></i>用户名
                    </label>
                    <input type="text" class="form-control" id="username" name="username" required>
                </div>

                <div class="mb-3">
                    <label for="password" class="form-label">
                        <i class="fas fa-lock me-1"></i>密码
                    </label>
                    <input type="password" class="form-control" id="password" name="password" required>
                </div>

                <div class="d-grid mb-3">
                    <button type="submit" class="btn btn-primary" id="loginBtn">
                        <i class="fas fa-sign-in-alt me-2"></i>登录
                    </button>
                </div>

                <div class="text-center">
                    <p class="mb-0">还没有账号？ 
                        <a href="{{ url_for('register') }}" class="text-decoration-none">
                            立即注册
                        </a>
                    </p>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.getElementById('loginForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    
    const loginBtn = document.getElementById('loginBtn');
    const originalText = loginBtn.innerHTML;
    
    // 显示加载状态
    loginBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>登录中...';
    loginBtn.disabled = true;
    
    try {
        const formData = new FormData(this);
        const data = {
            username: formData.get('username'),
            password: formData.get('password')
        };
        
        const response = await apiRequest('/login', 'POST', data);
        
        if (response.success) {
            showToast(response.message, 'success');
            // 延迟跳转，让用户看到成功消息
            setTimeout(() => {
                window.location.href = '/dashboard';
            }, 1000);
        } else {
            showToast(response.message, 'error');
        }
    } catch (error) {
        showToast('登录失败，请稍后重试', 'error');
    } finally {
        // 恢复按钮状态
        loginBtn.innerHTML = originalText;
        loginBtn.disabled = false;
    }
});

// 回车键登录
document.addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
        document.getElementById('loginForm').dispatchEvent(new Event('submit'));
    }
});
</script>
{% endblock %}